<template>
    <a-layout>
      <!-- <a-layout-header class="header">
        顶部区域
      </a-layout-header> -->
      <CommonHeader />
      <a-layout-content>
        <a-layout>
          <!-- <a-layout-sider width="200" style="background: #ccc;">
            左侧边栏区域
          </a-layout-sider> -->
          <CommonSider />
          <a-layout-content :style="{ background:'#666' }">
          <!-- <a-layout-content :style="{ padding: '0 24px', minHeight: '280px', color:'#666', background: '#fff' }"> -->
            右侧内容区域
          </a-layout-content>
        </a-layout>
      </a-layout-content>
      <!-- <a-layout-footer style="text-align: center">
        底部区域
      </a-layout-footer> -->
      <CommonFooter />
    </a-layout>
  </template>
  <script setup>
  import CommonHeader from './pages/CommonHeader.vue'
  import CommonSider from './pages/CommonSider.vue'
  import CommonFooter from './pages/CommonFooter.vue'
  </script>
  <style>
  body #app {
    width: 100%;
    height: 100%;
    color: #fff;
  }
  #app {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  .ant-layout {
    height: 100%;
    width: 100%;
  }
  
  </style>